<template>
  <div class="tutorial-page">
    <div class="tutorial-header">
      <h1>Vue 创建</h1>
      <p>学习如何创建Vue项目，了解项目结构和基本配置</p>
    </div>

    <div class="tutorial-content">
      <div class="section">
        <h2>使用 Vue CLI 创建项目</h2>
        <p>Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：</p>
        <ul>
          <li>交互式的项目脚手架</li>
          <li>零配置的原型开发</li>
          <li>一个运行时依赖 (@vue/cli-service)</li>
          <li>丰富的官方插件集</li>
        </ul>
        
        <h3>安装 Vue CLI</h3>
        <pre><code class="language-bash"># 安装 Vue CLI
npm install -g @vue/cli

# 检查版本
vue --version</code></pre>

        <h3>创建新项目</h3>
        <pre><code class="language-bash"># 创建新项目
vue create my-project

# 或者使用图形化界面
vue ui</code></pre>
      </div>

      <div class="section">
        <h2>使用 Vite 创建项目</h2>
        <p>Vite 是下一代前端构建工具，具有极快的冷启动和热重载：</p>
        
        <h3>使用 npm</h3>
        <pre><code class="language-bash"># 使用 npm
npm create vue@latest

# 进入项目目录
cd my-project

# 安装依赖
npm install

# 启动开发服务器
npm run dev</code></pre>

        <h3>使用 yarn</h3>
        <pre><code class="language-bash"># 使用 yarn
yarn create vue

# 进入项目目录
cd my-project

# 安装依赖
yarn

# 启动开发服务器
yarn dev</code></pre>
      </div>

      <div class="section">
        <h2>项目结构解析</h2>
        <p>Vue CLI 创建的项目通常具有以下结构：</p>
        <pre><code class="language-bash">my-project/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── router/
│   ├── store/
│   ├── App.vue
│   └── main.js
├── package.json
├── README.md
└── vue.config.js</code></pre>

        <h3>关键文件说明</h3>
        <ul>
          <li><strong>public/index.html</strong>: 页面模板</li>
          <li><strong>src/main.js</strong>: 入口文件</li>
          <li><strong>src/App.vue</strong>: 根组件</li>
          <li><strong>src/components/</strong>: 组件目录</li>
          <li><strong>package.json</strong>: 项目依赖和脚本配置</li>
        </ul>
      </div>

      <div class="section">
        <h2>常用命令</h2>
        <pre><code class="language-bash"># 开发环境启动
npm run serve

# 生产环境构建
npm run build

# 代码检查
npm run lint</code></pre>
      </div>
    </div>
  </div>
</template>

<script setup>
// 页面逻辑可以在这里添加
</script>

<style scoped>
@import '@/assets/tutorial-styles.css';
</style>